import {Order} from './Order'
import { requestModifiedOrderToSend, requestReturnQuestlist, requestModifiedCanReturnOrder } from '../../api/order'
import { Button, Image, Popconfirm, Space, Tag } from 'antd'
import React from 'react'
import QueueAnim from 'rc-queue-anim'
import { connect } from 'react-redux'

class OrderReturnBack extends Order {
    componentDidMount () {
        this.init()
    }

    init () {
        requestReturnQuestlist().then(res => {
            this.setState({
                dataSource: res.data,
                loading: false
            })
        })
    }

    confirmReturn (orderid) {
        requestModifiedCanReturnOrder(orderid).then(res => {
            console.log(res.data)
            this.init()
        })
    }

    sendProducts (orderid, msg) {
        requestModifiedOrderToSend(orderid, msg).then(res => {
            console.log(res.data)
            this.init()
        })
    }

    render () {
        const columns = [
            {
                title: '订单号',
                dataIndex: 'orderid',
                key: 'orderid',
                width: 250,
                fixed: 'left',
                ...this.getColumnSearchProps('orderid', '请输入订单号'),
                render: (text) => text
            },
            {
                title: '商品名',
                width: 240,
                dataIndex: 'proname',
                key: 'proname',
                ...this.getColumnSearchProps('proname', '请输入id或商品名', 'proid'),
                // eslint-disable-next-line
                render: (text, record) => <a
                    onClick={this.handleVisible.bind(this, record.proid, '复制产品id成功')}>{text}</a>,
            },
            {
                title: '商品图片',
                width: 150,
                dataIndex: 'img1',
                key: 'img1',
                render: (value) => <Image key="img" src={value} width={100} height={100} placeholder={
                    <Image
                        preview={false}
                        src="https://web.chengqige.com/vipshop/v1/dist/static/loading.gif"
                        width={100}
                        height={100}
                    />
                }/>
            },
            {
                title: '订单价格',
                width: 150,
                dataIndex: 'originprice',
                key: 'originprice',
                render: (text, record) => (<label>{Math.floor(record.originprice * record.discount*record.count/10)}</label>)
            },
            {
                title: '商品规格',
                width: 150,
                dataIndex: 'size',
                key: 'size',
                render: (text) => (<Tag color="green">{text}</Tag>)
            },
            {
                title: '购买数量',
                width: 150,
                dataIndex: 'count',
                key: 'count',
            },
            {
                title: '客户姓名',
                width: 130,
                dataIndex: 'name',
                ...this.getColumnSearchProps('name', '请输入userid或姓名', 'userid'),
                // eslint-disable-next-line
                render: (text, record) => <a
                    onClick={this.copyWhenClick.bind(this, record.userid, '复制userid成功')}>{text}</a>,
                key: 'name',
            },
            {
                title: '客户电话',
                width: 130,
                dataIndex: 'tel',
                key: 'tel'
            },
            {
                title: '送货省',
                width: 100,
                dataIndex: 'province',
                ...this.getColumnSearchProps('province', '请输入省'),
                render: (text) => text,
                key: 'province'
            },
            {
                title: '送货城市',
                width: 120,
                dataIndex: 'city',
                ...this.getColumnSearchProps('city', '请输入城市'),
                render: (text) => text,
                key: 'city'
            },
            {
                title: '送货区',
                width: 100,
                ...this.getColumnSearchProps('county', '请输入区'),
                render: (text) => text,
                dataIndex: 'county'
            },
            {
                title: '详细地址',
                width: 350,
                dataIndex: 'addressDetail',
                ...this.getColumnSearchProps('addressDetail', '请输入详细地址（部分内容即可）'),
                render: (text) => text,
                key: 'addressDetail'
            }, {
                title: '同意退货？',
                width: 180,
                fixed: 'right',
                render: (text, record) => (
                    <Space size="middle">
                        <Popconfirm onConfirm={this.confirmReturn.bind(this, record.orderid)} title="同意退货？">
                            <Button>
                                同意
                            </Button>
                        </Popconfirm>
                        <Popconfirm onConfirm={this.sendProducts.bind(this, record.orderid, '商家拒绝退货')} title="拒绝退货？">
                            <Button type="primary" danger>
                                拒绝
                            </Button>
                        </Popconfirm>
                    </Space>
                ),
            },
        ]

        return (<QueueAnim className="demo-content" key="demo">
            {this.props.show ? <div className="demo-tbody" key="a">{this.element(columns)}</div> : null}
        </QueueAnim>)
    }
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(OrderReturnBack)
